<template>
	<view class="page">
		<view class="app">
			<view class="h1">{{banner.title || banner.name}}</view>
			<!-- <view class="grid"> -->
			<view :class="banner.display.layout || 'list'">
				<view class="item" v-for="(it, idx) in items.list" :key="idx" @click="goDetail(it)">
					<view class="cover">
						<view class="wp ratio3_4">
							<image class="image img-show" mode="widthFix" style="width: 100%;" :src="it.cover.url"></image>
						</view>
					</view>
					<view class="info">
						<view class="h4"></view>
						<view class="h3">{{it.title}}</view>
						<view v-if="it.ratingValue" class="rank">
							<rating :count="it.ratingValue || 0" />
							<text>{{it.ratingValue}}</text>
						</view>
						<view class="meta">
							{{it.cardSubtitle}}
						</view>
						<view class="cite">{{it.description}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import rating from "@/components/uni-rating-start/uni-rating-start.vue"
	
	let api = require("@/utils/api.js")
	
	export default {
		data() {
			return {
				collections: ['book_top250', 'book_classic', 'book_fiction', 'book_film_original',
					'book_hot', 'book_latest', 'book_nonfiction', 'book_score'],
				banner: {id: -1},
				items: {
					list: [],
					loading: false,
					page: {page: 1, size: 12}
				},
				tempItems: []
			}
		},
		components: {rating},
		onLoad(event) {
			if(event && event.query){
				try {
					this.banner = JSON.parse(decodeURIComponent(event.query));
				} catch (error) {
					this.banner = JSON.parse(event.query);
				}
			}
			this.init();
		},
		onPullDownRefresh() {
			// 重置分页参数
			this.tempItems = [];
			this.items.list = [];
			this.items.page.page = 1;
			this.init();
		},
		onShareAppMessage() {
			return {
				title: '涨知识-读书',
				path: '/pages/book/collection/list/list'
			}
		},
		methods: {
			init() {
				this.tempItems = [];
				this.banner.id = this.collections[Math.floor(Math.random() * this.collections.length)]
				this.getDetail();
				this.getItems()
			},
			getDetail() {
				var that = this;
				uni.request({
					url: api.db_collection + that.banner.id,
					success: (res) => {
						if (res.statusCode == 200 && res.data.status == 'ok') {
							if(!res.data || !res.data.data){
								that.showNoDataErr = true;
								return;
							}
							that.banner = res.data.data;
							that.banner.display = that.getJSONByStr(that.banner.display, {layout: 'cardlist'})
						} else {
							that.showNoDataErr = true;
							return;
						}
					},
					complete: ()=>{uni.stopPullDownRefresh();}
				});
			},
			getItems() {
				var that = this;
				if(that.items.loading)
					return;
				that.items.loading = true;
				if(that.tempItems.length > 0) {
					that.items.list = that.items.list.concat(that.tempItems);
					// 置空临时数组
					that.tempItems = [];
					that.items.page.page++;
					that.items.loading = false;
					// 加载下一页数据，存放在临时数组中
					setTimeout(function() {that.getTempItems(that.items.page.page)}, 100);
				}else{
					uni.request({
						url: api.db_collection_item + that.banner.id,
						data: that.items.page,
						success: (res) => {
							if (res.statusCode == 200 && res.data.status == 'ok') {
								var data = res.data.data;
								if(!data || !data.list || data.list.length == 0){
									return;
								}
								data.list.forEach(d => {
									d.cover = that.getJSONByStr(d.cover, {})
								})
								if(data.isFirstPage)
									that.items.list = data.list;
								else
									that.items.list = that.items.list.concat(data.list);
								that.items.page.page++;
								// 加载下一页数据，存放在临时数组中
								setTimeout(function() {that.getTempItems(that.items.page.page)}, 100);
							}
						}, complete: () => {that.items.loading = false;}
					});
				}
			},
			getTempItems(pageNo) {
				var that = this;
				uni.request({
					url: api.db_collection_item + that.banner.id,
					data: {page: pageNo, size: that.items.page.size},
					success: (res) => {
						if (res.statusCode == 200 && res.data.status == 'ok') {
							var data = res.data.data;
							if(!data || !data.list || data.list.length == 0){
								return;
							}
							data.list.forEach(d => {
								d.cover = that.getJSONByStr(d.cover, {})
							})
							that.tempItems = data.list;
						}
					}
				});
			},
			onReachBottom(event){
				this.getItems();
			},
			goDetail(detail) {
				var param = {id: detail.subjectId, title: detail.title, author:detail.author, ratingValue:detail.ratingValue, cardSubtitle: detail.cardSubtitle};
				uni.navigateTo({
					url: '/pages/book/detail/detail?query=' + encodeURIComponent(JSON.stringify(param))
				});
			},
			getJSONByStr(str, defaultVal){
				try {
					return JSON.parse(str);
				} catch (error) {
					console.log(error)
				}
				return defaultVal;
			}
		}
	}
</script>

<style>
.page {
	height: auto;
}
page{
  height: 100%;
}
.app {
    padding-top: 100rpx;
	padding-left: 2%;
	padding-right: 2%;
	max-width: 1300rpx;
	margin: 0 auto;
	overflow-x: hidden;
}
.app .h1 {
    font-size: 48rpx;
    font-weight: normal;
    box-sizing: border-box;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 12rpx;
    padding-left: 4%;
}
.list .item {
    text-decoration: none;
    color: #9b9b9b;
}
.cardlist .item {
    text-decoration: none;
    color: #9b9b9b;
}
.grid .item {
    text-decoration: none;
    color: #9b9b9b;
}
.list .item, .cardlist .item {
    display: block;
    padding: 40rpx 4%;
    overflow: hidden;
    position: relative;
}
.list .item .cover, .cardlist .item .cover {
    float: left;
    margin-right: 30rpx;
    width: 200rpx;
    min-height: 200rpx;
}
.list .item {
    text-decoration: none;
    color: #9b9b9b;
}
.list .item .img-show {
    opacity: 1;
	width: 100%;
}
.list .item .info, .cardlist .item .info {
    overflow: hidden;
}
.list .h3, .list .h4, .list .p {
    margin: 0;
}
.list .item .h4, .cardlist .item .h4 {
    font-size: 24rpx;
    padding-bottom: 10rpx;
}
.list .item .h3, .cardlist .item .h3 {
    font-size: 34rpx;
    padding: 0 0 10rpx;
    color: #494949;
}
.list .item .rank, .cardlist .item .rank {
    font-size: 24rpx;
}
.list .item .rank, .cardlist .item .rank {
    font-size: 24rpx;
	line-height: 40rpx;
}
.list .item .meta, .list .item .star, .cardlist .item .meta, .cardlist .item .star {
    font-size: 24rpx;
	line-height: 40rpx;
}
.list .item .meta, .cardlist .item .meta {
    padding-top: 20rpx;
	line-height: 40rpx;
}
.list .item::after, .cardlist .item::after {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2rpx;
    background: #ccc;
    -webkit-transform: scaleY(0.5);
    content: '';
    position: absolute;
    -webkit-transform-origin: 0 bottom;
}

.grid {
    padding: 20px 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 660px;
    overflow: hidden;
    box-sizing: border-box;
}
.grid .item {
    float: left;
    box-sizing: border-box;
    width: 33.33333%;
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 20px;
    overflow: hidden;
	color: #9b9b9b;
}
.grid .item .cover {
    min-height: 87px;
    overflow: hidden;
    position: relative;
}
.grid .ratio1_1, .grid .ratio3_4 {
    position: relative;
}
.grid .ratio3_4:before {
    padding-top: 143%;
}
.grid .ratio1_1:before, .grid .ratio3_4:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.grid .item .image {
    display: block;
    position: absolute;
    left: -100%;
    right: -100%;
    top: -100%;
    bottom: -100%;
    margin: auto;
}
.grid .item .info {
    height: 45px;
    overflow: hidden;
}
.grid .ratio1_1:before, .grid .ratio3_4:before {
    content: "";
    display: block;
    padding-top: 100%;
}
.grid .ratio3_4:before {
    padding-top: 143%;
}
.grid .item .h4, .grid .item .cite, .grid .item .meta {
    display: none;
}
.grid .item .h3 {
    font-size: 26rpx;
    font-weight: normal;
    padding: 10rpx 0 0;
    color: #494949;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.grid .item .rank {
    height: 32rpx;
    font-size: 24rpx;
    padding-top: 6rpx;
    text-align: center;
}
.grid .item .h4, .grid .item .cite, .grid .item .meta {
    display: none;
}
.list .item .cite, .cardlist .item .cite {
    font-size: 26rpx;
    margin-top: 28rpx;
    line-height: 36rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.list .item .cover, .cardlist .item .cover {
    float: left;
    margin-right: 15px;
    width: 100px;
    min-height: 100px;
}
.list .item .cover .img, .cardlist .item .cover .img {
    width: 100%;
}
.list .item .info, .cardlist .item .info {
    overflow: hidden;
}
.list .item .h4, .cardlist .item .h4 {
    font-size: 24rpx;
    padding-bottom: 10rpx;
}
.list .item .h3, .cardlist .item .h3 {
    font-size: 34rpx;
    padding: 0 0 15rpx;
    color: #494949;
}
.list .item .rank, .cardlist .item .rank {
    font-size: 24rpx;
}
.list .item .meta, .list .item .star, .cardlist .item .meta, .cardlist .item .star {
    font-size: 24rpx;
}
.list .item .meta, .cardlist .item .meta {
    padding-top: 10rpx;
}
.list .item .cite, .cardlist .item .cite {
    font-size: 26rpx;
    margin-top: 28rpx;
    line-height: 36rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.list .item .cite {
    font-style: normal;
}
.list .item .rank, .cardlist .item .rank {
    font-size: 24rpx;
}
</style>
